<template>
    <div class="blog" @scroll="handleScroll">
        <div class="blogList">
            <div class="blogCont" v-for="(item, i) in blogList" @click="toDetails(item.id)">
                <div class="imgBox"><img :src="item.banner_url" alt="" /></div>
                <h2>{{ item.article_title }}</h2>
                <p class="createTime">{{ item.createTime }}</p>
                <p class="content" v-html="item.article_content"></p>
                <div class="toDetails">
                    <p>Read more</p>
                    <img src="@/assets/images/blog_next_icon.svg" />
                </div>
            </div>
            <div class="placeholder"></div>
            <div class="placeholder"></div>

        </div>
        <div class="loading" v-if="loading">
            <NSpin size="medium" />
        </div>
        <div v-if="finish" center m-y-10 color-fff> -.- </div>
    </div>
</template>

<script setup lang="ts">
import { NSpin } from 'naive-ui';
import { ref, reactive } from 'vue';
import { getBlogList } from '@/api/blog/index'
import { useRouter } from 'vue-router';
const router = useRouter();
const blogList = ref([]);
const loading = ref(false);
const finish = ref(false);
const page = ref(1);
const pageSize = ref(9);
const _getBlogList = async () => {
    loading.value = true;
    const params = {
        page: page.value,
        pageSize: pageSize.value
    };
    const res = await getBlogList(params);
    loading.value = false;
    console.log(res.data.total, blogList.value.length);
    page.value++;
    blogList.value.push(...res.data.list);
    if (res.data.total <= blogList.value.length) {
        finish.value = true;
    }
};
_getBlogList();
const handleScroll = (event: any) => {
    const scrollHeight = event.target.scrollHeight;
    const scrollTop = event.target.scrollTop;
    const clientHeight = event.target.clientHeight;
    if (scrollTop + clientHeight >= scrollHeight - 10) {
        console.log('到底了');
        if (!loading.value && !finish.value) {
            _getBlogList();
        }
    }
};
const toDetails = (id: number) => {
    console.log('id', id);
    router.push({
        path: '/blogDetails',
        query: {
            id
        }
    }).catch(err => {
        console.error('导航到博客详情页时出错:', err);
    });

};
</script>

<style lang="less" scoped>
.blog {
    height: 100%;
    overflow: auto;

    .blogList {
        max-width: 1120px;
        margin: 26px auto 0;
        // display: grid;
        justify-content: space-between;
        // grid-template-columns: repeat(auto-fill, 352px);

        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;

        .blogCont {
            max-height: 562px;
            width: 352px;
            background: #1A1E28;
            border-radius: 16px;
            border: 1px solid #FFFFFF1A;
            margin-bottom: 32px;
            padding: 16px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;

            .imgBox {

                width: 100%;
                height: 325px;
                display: block;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            h2 {
                font-size: 16px;
                font-weight: 700;
                color: #fff;
                margin-top: 12px;
            }

            .createTime {
                font-size: 14px;
                color: #FFFFFFB2;
                margin-top: 12px;
            }

            .content {
                font-size: 14px;
                color: #FFFFFFB2;
                margin-top: 12px;
                line-height: 22px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 6;
                -webkit-box-orient: vertical;
            }

            .toDetails {
                // position: absolute;
                // text-align: right;
                // bottom: 14px;
                // right: 16px;
                display: flex;
                align-items: center;
                color: #FFA22F;
                font-size: 14px;
                justify-content: right;

                img {
                    margin-left: 8px;
                    width: 15px;
                    height: 15px;
                }
            }
        }

        .placeholder {
            width: 352px;
        }
    }

    .loading {
        text-align: center;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .blog {
        .blogList {
            justify-content: center;
        }
    }
}
</style>
